/**
 * Created by 顾杰 on 2017/5/9.
 */
import React from 'react';
import {getEchartsFontSize} from  '../../utils/httputil';
import ReactEcharts from 'echarts-for-react';
import styles from './index.less';

const empty = require('is-empty');
class WitEchartsItem extends React.Component {

  constructor(props) {
    super(props);
    this.state={};
  }

  render() {
    const {type, data} = this.props;
    if(empty(data)) {
      return false;
    }
    let option = {};
    switch (type) {
      case 'line':
        option = {
          color: ['#FF8000'],
          grid: {
            containLabel: true,
            left: '2%',
            right: '3%',
            bottom: '15%',
            top: '15%'
          },
          xAxis: {
            axisLine: {show: true},
            axisTick: {show: false},
            data: data.month,
            axisLabel:{
              interval:0,
              rotate:-30
            }
          },
          yAxis: {
            nameTextStyle: {
              fontSize: getEchartsFontSize()
            },
            splitLine: {
              show: true
            },
            axisLine: {show: true},
            axisTick: {show: false},
            axisLabel: {textStyle: {fontSize: getEchartsFontSize()}}

          },
          series: [
            {
              type: 'line',
              data: data.lineSource,
              showSymbol: true,
              symbol: 'circle',
              symbolSize: 15,
              label: {
                normal: {show: true, textStyle: {fontSize: getEchartsFontSize()}}
              }
            }
          ]
        };
        break;
      case 'pie':
        option = {   tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
          legend: {
            orient: 'vertical',
            x: 'left',
          },
          series: [
            {
              name:'访问来源',
              type:'pie',
              radius: ['30%', '50%'],
              avoidLabelOverlap: false,
              hoverAnimation:false,
              silent:true,
              label: {
                normal: {
                  show: true,
                  position: 'center',
                  formatter:function(){
                    return'97%'
                  },
                  textStyle:{
                    fontSize:30,
                    color:'white'
                  }
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:[
                {value:335, name:'97%',
                  itemStyle:{
                    normal:{color:'white'}
                  }
                },
                {value:50,
                  itemStyle:{
                    normal:{color:'gray'}
                  }
                },

              ]
            }
          ]
        };
        break;
      case 'bar':
        option = {
          title : {
            text: '正式党员占比',
            x:'center',
            y:'bottom'
          },
          color: ['#3398DB'],
          tooltip : {
            trigger: 'item',
            axisPointer : {
              type : 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '12%',
            containLabel: true
          },
          xAxis : [
            {
              type : 'category',
              data : data.xAxis,
              axisTick: {
                alignWithLabel: true
              },
              axisLabel:{
                interval:0,
                rotate:-20,
                align :'right',
              }
            }
          ],
          yAxis : {
            axisLabel: {textStyle: {fontSize: getEchartsFontSize()}},
            type : 'value'
          },
          series : [
            {
              type:'bar',
              data: data.barSource,
              tooltip: {textStyle: {fontSize: getEchartsFontSize()}},
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  fontSize:20
                }
              }
            }
          ]
        };
        break;
    }
    return (
      <div>
        <ReactEcharts option={option}/>
      </div>
    );
  }
}

export default WitEchartsItem;
